<template>
  <div>
    <div
      class="topSearch"
      style="margin-bottom: 10px; display: flex; flex-wrap: wrap"
    >
      <span
        >仓库：
        <el-select
          size="small"
          style="width: 200px"
          v-model="params.areaId"
          clearable
        >
          <el-option
            v-for="item in warehouseList"
            :label="item.areaName"
            :value="item.area"
            :key="item.area"
          ></el-option> </el-select
      ></span>
      <span style="margin-left: 15px"
        >门店名称：<el-input
          size="small"
          style="width: 200px"
          v-model="params.storeName"
          clearable
        ></el-input
      ></span>
      <span style="text-align: center; margin-left: 20px"
        >店铺类型：
        <el-select
          v-model="params.storeType"
          placeholder="请按店铺类型搜索"
          size="small"
          clearable
          style="width: 200px"
        >
          <el-option label="新增单" value="1"></el-option>
          <el-option label="拓展单" value="2"></el-option>
        </el-select>
      </span>
      <span style="margin-left: 5px"
        >创建时间：
        <el-date-picker
          v-model="sateValue"
          type="daterange"
          range-separator="至"
          clearable
          size="small"
          @change="selectTime"
          style="width: 200px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </span>
      <span style="margin-left: 15px">
        <el-button size="small" type="primary" @click="_search"
          >搜 索</el-button
        >
        <el-button size="small" type="info" @click="_reset">重 置</el-button>
      </span>
    </div>
    <div style="float: right; margin: 0 20px 10px 0">
      <el-button size="small" type="primary" @click="_add"
        >新增增加单
      </el-button>
      <el-button
        type="primary"
        size="small"
        @click="_downLoad"
        v-prevent-re-click
        ><i class="el-icon-download"></i>增加单下载
      </el-button>
    </div>
    <div class="centerTable">
      <el-table
        :data="multipleData"
        height="calc(100vh - 350px)"
        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }"
      >
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="userName" label="操作人"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="afterTime" label="发货日期"></el-table-column>
        <el-table-column prop="areaName" label="仓库"></el-table-column>
        <el-table-column prop="storeName" label="门店名称"></el-table-column>
        <el-table-column prop="storeType" label="门店类型">
          <template slot-scope="scope">
            <span v-if="scope.row.storeType == 1">新增单</span>
            <span v-if="scope.row.storeType == 2">扩展单</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="col in editableColumns"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
        >
          <template v-slot:default="scope">
            <!--            <el-input-->
            <!--                v-if="scope.row.isEditing[col.prop]"-->
            <!--                v-model="scope.row[col.prop]"-->
            <!--                @blur="blurEvent(scope.row, scope.$index, col.prop)"-->
            <!--                v-focus-->
            <!--            ></el-input>-->
            <p>
              {{ scope.row[col.prop] }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="付款截图">
          <template v-slot:default="scope">
            <div style="display: flex">
              <el-image
                v-for="(item, index) in scope.row.payProofList"
                :key="index"
                :src="host + item"
                :preview-src-list="
                  scope.row.payProofList.map((img) => host + img)
                "
                class="img-item"
                fit="cover"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="凭证截图">
          <template v-slot:default="scope">
            <div style="display: flex">
              <el-image
                v-for="(item, index) in scope.row.addImgList"
                :key="index"
                :src="host + item"
                :preview-src-list="
                  scope.row.addImgList.map((img) => host + img)
                "
                class="img-item"
                fit="cover"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="出库单" width="150px">
          <template v-slot:default="scope">
            <el-dropdown v-if="scope.row.outExcelUrl" @command="downOut">
              <el-link type="primary">
                下载出库单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-link>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in scope.row.outExcelUrl.split(',')"
                  :command="item"
                  :key="item"
                >
                  {{ item }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="card" label="卡号"></el-table-column>
        <el-table-column label="出库状态">
          <template v-slot:default="scope">
            <span v-if="scope.row.status == 0">未出库</span>
            <span v-if="scope.row.status == 1" style="color: #f5b330"
              >已出库</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="a" label="操作" width="100px">
          <template v-slot:default="scope">
            <el-link
              style="
                color: #66b1ff;
                text-decoration: underline;
                margin-right: 10px;
              "
              @click="_edit(scope.row)"
              >编 辑
            </el-link>
            <el-link
              style="
                color: #67c23a;
                text-decoration: underline;
                margin-right: 10px;
              "
              @click="outSpring(scope.row, '2')"
              >出 库
            </el-link>
            <el-link
              style="
                color: #f5b330;
                text-decoration: underline;
                margin-right: 10px;
              "
              @click="outSpring(scope.row, '1')"
              >退款入库
            </el-link>
            <el-link
              style="
                color: #ce0e0f;
                text-decoration: underline;
                margin-right: 10px;
              "
              @click="_delete(scope.row)"
              >删 除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 20px 0"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogAdd"
        :title="title"
        top="10px"
        :close-on-click-modal="false"
        height="calc(100vh - 350px)"
        style="overflow-y: auto"
        width="40%"
      >
        <div>
          <el-row>
            <el-col :span="12">
              <span style="width: 50px">店名：</span>
              <el-input
                size="small"
                style="width: 280px"
                v-model="data.storeName"
              ></el-input>
            </el-col>
            <el-col :span="12">
              <span style="width: 70px">发货日期：</span>
              <el-date-picker
                v-model="data.afterTime"
                type="date"
                size="small"
                style="width: 280px"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span style="width: 50px">类型：</span>
              <el-select
                v-model="data.storeType"
                size="small"
                style="width: 280px"
              >
                <el-option label="新增单" value="1"></el-option>
                <el-option label="拓展单" value="2"></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <span style="width: 50px">仓库：</span>
              <el-select
                size="small"
                style="width: 280px"
                v-model="data.areaId"
              >
                <el-option
                  v-for="item in warehouseList"
                  :label="item.areaName"
                  :value="item.area"
                  :key="item.area"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
          <!--        -->

          <el-row>
            <el-col :span="12">
              <span>报价单金额：</span>
              <el-input-number
                v-model="data.fhdFee"
                :min="0"
                size="small"
                style="width: 200px"
                @change="changeNum('fhdFee', $event)"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>报价单运费：</span>
              <el-input-number
                v-model="data.bjdFee"
                :min="0"
                size="small"
                style="width: 200px"
                @change="changeNum('bjdFee', $event)"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--        -->
          <!--          <el-row>-->

          <!--            <el-col :span="12">-->
          <!--              <span>二次上门:</span>-->
          <!--              <el-input-number-->
          <!--                  v-model="data.secondVisit"-->
          <!--                  :min="0"-->
          <!--                  size="small"-->
          <!--                  style="width: 200px"-->
          <!--                  @change="changeNum('secondVisit', $event)"-->
          <!--              ></el-input-number>-->
          <!--            </el-col>-->
          <!--            <el-col :span="12">-->
          <!--              <span>三次上门:</span>-->
          <!--              <el-input-number-->
          <!--                  v-model="data.thirdVisit"-->
          <!--                  :min="0"-->
          <!--                  size="small"-->
          <!--                  style="width: 200px"-->
          <!--                  @change="changeNum('thirdVisit', $event)"-->
          <!--              ></el-input-number>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <!--          &lt;!&ndash;        &ndash;&gt;-->
          <!--          <el-row>-->
          <!--            <el-col :span="12">-->
          <!--              <span>内安装费:</span>-->
          <!--              <el-input-number-->
          <!--                  v-model="data.inInstallFee"-->
          <!--                  :min="0"-->
          <!--                  size="small"-->
          <!--                  style="width: 200px"-->
          <!--                  @change="changeNum('installFee', $event)"-->
          <!--              ></el-input-number>-->
          <!--            </el-col>-->
          <!--            <el-col :span="12">-->
          <!--              <span>外安装费:</span>-->
          <!--              <el-input-number-->
          <!--                  v-model="data.outInstallFee"-->
          <!--                  :min="0"-->
          <!--                  size="small"-->
          <!--                  style="width: 200px"-->
          <!--                  @change="changeNum('installFee', $event)"-->
          <!--              ></el-input-number>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <!--        -->
          <el-row>
            <el-col :span="12">
              <span>客户退款:</span>
              <el-input-number
                v-model="data.customerRefund"
                :min="0"
                size="small"
                style="width: 200px"
                @change="changeNum('customerRefund', $event)"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>欠货补发:</span>
              <el-input-number
                v-model="data.qpReissue"
                :min="0"
                size="small"
                style="width: 200px"
                @change="changeNum('qpReissue', $event)"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--        -->
          <el-row>
            <el-col :span="12">
              <span>付款金额:</span>
              <el-input-number
                v-model="data.payMoney"
                :min="0"
                size="small"
                style="width: 200px"
                @change="changeNum('payMoney', $event)"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span style="width: 70px">付款日期：</span>
              <el-date-picker
                v-model="data.payTime"
                type="date"
                size="small"
                style="width: 280px"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span>门店运费/快递费:</span>
              <el-input-number
                v-model="data.freight"
                :min="0"
                size="small"
                style="width: 200px"
                @change="changeNum('freight', $event)"
              ></el-input-number>
            </el-col>
          </el-row>

          <!--        -->
          <el-row>
            <el-col :span="12">
              <span style="width: 50px">备注：</span>
              <el-input
                type="textarea"
                style="width: 280px"
                v-model="data.remark"
              ></el-input>
            </el-col>
            <el-col :span="12">
              <span style="width: 50px">卡号：</span>
              <el-input
                style="width: 280px"
                size="small"
                v-model="data.card"
              ></el-input>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 15px">
          <el-row style="display: flex; align-items: center">
            <el-col>
              <span>付款图：</span>
              <el-upload
                multiple
                class="uploader-wrap"
                :headers="headers"
                :action="`${$apiHost}/common/fileImgUrl`"
                :on-success="paySuc"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
                <template #tip>
                  <div class="img-wrap" style="display: flex">
                    <div v-for="(item, index) in payProofList">
                      <el-image
                        :key="index"
                        :src="host + item"
                        :preview-src-list="
                          payProofList.map((img) => host + img)
                        "
                        class="img-item"
                        fit="cover"
                      >
                      </el-image>
                      <div @click="deletePic(index)">
                        <el-icon name="delete"></el-icon>
                      </div>
                    </div>
                  </div>
                </template>
              </el-upload>
            </el-col>
            <el-col>
              <span>凭证：</span>
              <div>
                <span style="color: gray; font-size: 12px"
                  >(粘贴复制即可上传图片)</span
                >
                <div class="div" style="display: flex; align-items: center">
                  <div
                    v-for="(v, i) in data.addImgList"
                    style="
                      display: flex;
                      align-items: center;
                      margin-right: 10px;
                    "
                    :key="i"
                  >
                    <el-image
                      v-if="v"
                      :key="i"
                      style="width: 50px; height: 50px"
                      ref="preview"
                      :src="host + v"
                      :preview-src-list="[host + v]"
                    >
                    </el-image>
                    <!-- v-show="!editDetails" -->
                    <div @click="deleteImgVouchers(i)">
                      <el-icon name="delete"></el-icon>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <span slot="footer">
          <el-button @click="dialogAdd = false">取 消</el-button>
          <el-button type="primary" @click="_submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <multiplePutIn ref="multiplePI" @addStatus="receiveData"></multiplePutIn>
  </div>
</template>
<script>
import ExcelJS from 'exceljs'
import axios from 'axios'
import multiplePutIn from './components/multiplePutIn.vue'
import dayjs from 'dayjs'
// import { Message } from 'element-ui'
export default {
  name: 'multipleOrder',
  components: {
    multiplePutIn,
  },
  data() {
    return {
      dialogAdd: false,
      loading: false,
      sateValue: '',
      outSpringDialog: false,
      title: '',
      selectedFile: null,
      date: '',
      outId: '',
      setFile: '',
      areaId: '',
      num: 0,
      currentPage: 1,
      total: 0,
      host: this.$imgHost,
      warehouseList: [],
      editableColumns: [
        { prop: 'fhdFee', label: '报价单金额' },
        { prop: 'bjdFee', label: '报价单运费' },
        // {prop: 'inInstallFee', label: '内安装费'},
        // {prop: 'outInstallFee', label: '外安装费'},
        // {prop: 'secondVisit', label: '二次上门'},
        // {prop: 'thirdVisit', label: '三次上门'},
        { prop: 'customerRefund', label: '客户退款' },
        { prop: 'qpReissue', label: '欠数破损补发' },
        { prop: 'payMoney', label: '门店实付' },
        { prop: 'freight', label: '门店运费/快递费' },
      ],
      data: {
        storeName: '',
        newArea: '',
        storeType: '',
        remark: '',
        card: '',
        areaId: '',
        afterTime: '',
        bjdFee: 0,
        fhdFee: 0,
        // inInstallFee: 0,
        // outInstallFee: 0,
        // secondVisit: 0,
        // thirdVisit: 0,
        customerRefund: 0,
        qpReissue: 0,
        payMoney: 0,
        freight: 0,
        addImgList: [],
      },
      editId: '',
      params: {
        storeName: '',
        areaId: '',
        pageNumber: 1,
        pageSize: 20,
      },
      orderImg: [],
      produceList: [],
      orderProofList: [],
      productData: [],
      systemList: [],
      payProofList: [],
      multipleData: [],
      outFileList: [],
    }
  },
  computed: {
    headers() {
      const token = this.$quinn.getStorage('token')
      return {
        token,
      }
    },
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      },
    },
  },
  created() {
    // this.getSystemType()
    this.areaList()
    this.getData()
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    outSpring(row, val) {
      this.$refs.multiplePI.handleOpen(row, val)
    },
    deleteProduce(list, index) {
      list.splice(index, 1)
    },
    receiveData(val) {
      if (val) {
        this.getData()
      }
    },
    changeProduceName() {},
    selectTime(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format('YYYY-MM-DD')
        this.params.endTime = dayjs(val[1]).format('YYYY-MM-DD')
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    isDoc(filename) {
      return /\.(xlsx|xls|xltx|xltm)$/i.test(filename)
    },
    getSystemType() {
      this.$api.orderGetSystemTypeVo().then((res) => {
        this.systemList = res
        // this.myFilter(res)
      })
    },
    async _submit() {
      try {
        const apiMap = {
          新增: this.$api.afterSaleAddAfterSaleNew,
          编辑: this.$api.afterSaleUpdateAfterSaleNewInfo,
        }
        const apiFunc = apiMap[this.title]
        if (!apiFunc) return
        // Object.assign(this.data, {
        //   systemType: dataDictionary.get(this.data.systemType),
        // }) // 处理品牌方字段})
        const subData = {
          ...this.data,
          payProofList: this.payProofList,
        }
        if (!subData.afterTime) delete subData.afterTime
        if (this.title == '编辑') subData.id = this.editId
        const resDate = await apiFunc(subData)
        if (resDate == 1) {
          this.$message.success(`${this.title}成功！`)
          this.dialogAdd = false
          this.getData()
        }
      } catch (err) {
        console.error('接口请求出错：', err)
        this.$message.error('操作失败，请稍后重试')
      }
    },
    blurEvent(row, index, column) {
      row.isEditing[column] = false
      const payload = {
        id: row.id,
        [column]: row[column],
      }
      this.$api.afterSaleUpdateAfterSaleNewInfo(payload).then((res) => {
        if (res == 1) {
          this.$message.success('修改成功！')
          this.getData()
        }
      })
    },
    cellClick(row, column) {
      //input编辑
      Object.keys(row.isEditing).forEach((key) => {
        row.isEditing[key] = false
      })
      // 取消
      row.isEditing[column] = true
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getData()
    },
    _search() {
      this.params.pageNumber = 1
      this.getData()
    },
    _reset() {
      this.params = this.$options.data().params
      this.getData()
    },
    getData() {
      this.$api.afterSaleGetAfterSaleNewList(this.params).then((res) => {
        res.data.forEach((el) => {
          // el.systemType = dataDictionary.get(el.systemType) // 处理品牌方字段
          el.isEditing = {}
          this.editableColumns.forEach((col) => {
            el.isEditing[col.prop] = false
          })
        })
        this.multipleData = res.data
        this.total = res.total
      })
    },
    deleteImgVouchers(i) {
      this.data.addImgList.splice(i, 1)
    },
    handlePaste(event) {
      // 只能编辑损坏明细
      // if (this.editDetails) return
      // !this.editVouchers &&
      if (!this.dialogAdd) return
      const clipboardData = event.clipboardData || window.clipboardData
      // console.log('clipboardData', clipboardData)
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i]
          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile()
            if (file) {
              this.uploadImage(file) // 处理文件上传逻辑
            }
          } else {
            this.$message.error('请拷贝图片!')
            break
          }
        }
      }
    },
    downOut(row) {
      window.open('https://' + row)
    },
    uploadImage(imageFile) {
      console.log('imageFile', imageFile)
      const formData = new FormData()
      formData.append('file', imageFile)
      axios
        .post(`${this.$apiHost}/common/fileImgUrl`, formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            token: window.$quinn.getStorage('token'),
          },
        })
        .then((response) => {
          if (this.dialogAdd) {
            this.data.addImgList.push(response.data.result[0])
            // console.log('this.data.changeVouchers', this.data.changeVouchers)
          }
          // if (this.editVouchers) {
          //   // 上传修改凭证
          //   this.editImg.push(response.data.result[0])
          //   // this.editImgList.push('https://' + response.data.result[0]);
          // }
        })
        .catch((error) => {})
    },
    _add() {
      this.dialogAdd = true
      this.title = '新增'
      this.data = this.$options.data().data
      this.payProofList = []
      this.orderProofList = []
    },
    areaList() {
      this.$api.areaLedgerAreaList().then((res) => {
        this.warehouseList = res
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    paySuc(res) {
      if (res.code == 200 && res.result) {
        this.payProofList.push(res.result[0])
      }
    },
    deletePic(i) {
      this.payProofList.splice(i, 1)
    },
    changeNum(field, val) {
      if (!val) {
        this.$set(this.data, field, 0)
      }
    },
    _delete(e) {
      const data = {
        id: e.id,
      }
      this.$confirm('确认删除？')
        .then((_) => {
          this.$api.afterSaleDeleteAfterSaleNew(data).then((res) => {
            if (res == 1) {
              this.$message.success('删除成功！')
              this.getData()
            }
          })
        })
        .catch((_) => {
          return
        })
    },
    _edit(a) {
      this.dialogAdd = true
      this.editId = a.id
      this.title = '编辑'
      Object.keys(this.data).forEach((key) => {
        if (key in a) {
          a.storeType = a.storeType.toString()
          this.$set(this.data, key, a[key])
        }
      })
      this.payProofList = a.payProofList || [] // 回显
      this.data.addImgList = a.addImgList || []
    },
    getImageBase64(url) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.crossOrigin = 'anonymous'
        img.onload = function () {
          const canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          const ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          resolve(canvas.toDataURL('image/png'))
        }
        img.onerror = reject
        img.src = url
      })
    },
    async _downLoad() {
      this.loading = true
      if (!this.params.startTime || !this.params.endTime)
        return this.$message.warning('请选择开始时间和结束时间')
      const res = await this.$api
        .afterSaleGetAfterSaleNewList({
          pageSize: 10000,
          pageNum: 1,
          startTime: this.params.startTime,
          endTime: this.params.endTime,
        })
        .then()
      this.$message('正在导出，请稍等~')
      const workbook = new ExcelJS.Workbook()
      const worksheet = workbook.addWorksheet('Sheet1')
      const headers = [
        '发货日期',
        '仓库',
        '门店名称',
        '门店类型',
        '报价单金额',
        '报价单运费',
        '客户退款',
        '欠数破损补发',
        '门店实付',
        '门店运费/快递费',
        '付款截图',
        '凭证截图',
        '备注',
        '卡号',
      ]
      // 添加标题行
      const titleRow = worksheet.addRow(headers)
      // 设置列宽
      worksheet.columns = headers.map((item, index) => {
        if (index == 10 || index == 11) {
          // 交易截图
          return {
            width: 40,
            alignment: { vertical: 'middle', horizontal: 'center' }, // 所有列居中
          }
        } else {
          return {
            width: 20,
            alignment: { vertical: 'middle', horizontal: 'center' }, // 所有列居中
          }
        }
      })

      // 设置首行样式：紫色背景、白色加粗字体、居中
      titleRow.eachCell((cell) => {
        cell.fill = {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: '800080' },
        }
        cell.font = {
          bold: true,
          color: { argb: 'FFFFFF' },
        }
        cell.alignment = { vertical: 'middle', horizontal: 'center' }
      })

      for (const el of res.data) {
        if (el.storeType == 1) el.storeTypeName = '新增单'
        if (el.storeType == 2) el.storeTypeName = '扩展单'
        const row = worksheet.addRow([
          el.afterTime,
          el.areaName,
          el.storeName,
          el.storeTypeName,
          el.bjdFee,
          el.fhdFee,
          el.inInstallFee,
          el.outInstallFee,
          el.secondVisit,
          el.thirdVisit,
          el.customerRefund,
          el.qpReissue,
          el.payMoney,
          el.freight,
          '', // 图片位置
          '', // 图片位置
          el.remark,
          el.card,
        ])
        const images = Array.isArray(el.payProofList)
          ? el.payProofList
          : el.payProofList
          ? [el.payProofList]
          : []
        const images1 = Array.isArray(el.addImgList)
          ? el.addImgList
          : el.addImgList
          ? [el.addImgList]
          : []
        const imageHeight = 80
        const imageWidth = 100
        const gap = 10
        let totalWidth = images.length * (imageWidth + gap)
        if (images.length > 0) {
          worksheet.getRow(row.number).height = imageHeight + 10
          for (let i = 0; i < images.length; i++) {
            try {
              const base64 = await this.getImageBase64('https://' + images[i])
              const imageId = workbook.addImage({
                base64: base64,
                extension: 'png',
              })
              worksheet.addImage(imageId, {
                tl: {
                  col: 10 + i * 0.99, // 控制偏移列位置（让图片横向排列在一格里）
                  row: row.number - 1,
                },
                ext: { width: imageWidth, height: imageHeight },
              })
            } catch (err) {
              console.warn('图片插入失败:', 'https://' + images[i], err)
            }
          }
        }
        if (images1.length > 0) {
          worksheet.getRow(row.number).height = imageHeight + 10
          for (let i = 0; i < images.length; i++) {
            try {
              const base64 = await this.getImageBase64('https://' + images1[i])
              const imageId = workbook.addImage({
                base64: base64,
                extension: 'png',
              })
              worksheet.addImage(imageId, {
                tl: {
                  col: 11 + i * 0.99, // 控制偏移列位置（让图片横向排列在一格里）
                  row: row.number - 1,
                },
                ext: { width: imageWidth, height: imageHeight },
              })
            } catch (err) {
              console.warn('图片插入失败:', 'https://' + images1[i], err)
            }
          }
        }
      }
      const buffer = await workbook.xlsx.writeBuffer()
      saveAs(new Blob([buffer]), `增加单及产品出库详情.xlsx`)
      this.loading = false
    },
  },
}
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;

  span {
    display: inline-block;
    width: 90px;
  }
}
</style>
